<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/page/common/public.jspf"%>
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="max-age=0" http-equiv="Cache-Control" />
<meta content="width=device-width; initial-scale=1.2; minimum-scale=1.0; maximum-scale=2.0" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<meta content="240" name="MobileOptimized" />
<title>绑定银行卡</title>
<script type="text/javascript" src="${path }/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${path }/js/helper.js?v=${v}"></script>
<script type="text/javascript" src="${path }/js/control.js?v=${v}"></script>
<link href="${skin }/css/public.css" rel="stylesheet" type="text/css" />
<link href="${skin }/css/style.css" rel="stylesheet" type="text/css" />
<script>
$(function(){
	//输入提示语
	var promptText = {
		realname : {
			normal : "",
			formatError : "真实姓名必须为汉字。",
			isNull : "绑定银行卡必须先实名制"
		},
		bankname : {
			normal : "",
			isNull : "银行名称不能为空。"
		},
		province : {
			normal : "",
			isNull : "省不能为空。"
		},
		city : {
			normal : "",
			isNull : "市不能为空。"
		},
		subbranch : {
			normal : "",
			isNull : "开户行名称不能为空"
		},
		accountno : {
			normal : "",
			formatError : "银行卡号必须是数字。",
			isNull : "银行卡号不能为空"
		},
		withdrawmoney : {
			normal : "",
			formatError : "提款金额必须为整数!",
			isNull : "请输入提款金额!",
			atLeast : "提款金额最少20元，最多2万元。",
			isOver : "提款金额多于可用提款金额!", 
			insufficient : "您的可提款金额不足!"
		},
		withdrawpassword : {
			normal : "",
			isNull : "支付密码不能为空!"
		}
	};
	
	var cityLoad = function(provinceId){
		if(provinceId)
		{
			new Helper.RemoteTrans({
				url:Helper.basePath+"/memberCenter/member_operate/findCity/"+provinceId+".htm",
				onSuccess:function(options){
					$('#city').html("");
					for(var i=0;i<options.length;i++) 
					{
						$('#city').append('<option value="'+options[i].id+'"> '+options[i].name+' </option>');
					}
				}
			}).send();
		}
		else
		{
			citySelect.clear();
			citySelect.flush();
		}
	};
	
	new Helper.RemoteTrans({
		url:Helper.basePath+"/memberCenter/member_operate/findProvince.htm",
		onSuccess:function(options){
			for(var i=0;i<options.length;i++) 
			{
				$('#provinceId').append('<option value="'+options[i].id+'"> '+options[i].name+' </option>');
				if(i == 1)
				{
					cityLoad(options[i].id);
				}
			}
		}
	}).send();
	
	$('#provinceId').change(function(){
		cityLoad($(this).children('option:selected').val());
	});
	
	var validateRealName = function(){
		var readName = $('#realName').val();
		if(readName.trim() == "")
		{
			Helper.message(promptText.realname.isNull);
			return;
		}
		if(!Helper.validata.isChinese(readName))
		{
			Helper.message(promptText.realname.formatError);
			return;
		}
		return true;
	};
	
	var validatebank = function(){
		var bank = $("#bank").val();
		if(bank == '')
		{
			Helper.message(promptText.bankname.isNull);
			return;
		}
		return true;
	};
	
	var validateprovinceId = function(){
		var provinceId = $("#provinceId").val();
		if(provinceId == ''){
			Helper.message(promptText.province.isNull);
			return null;
		}
		return true;
	};
	
	var validateCity = function(){
		var city = $("#city").val();
		if(city == ''){
			Helper.message(promptText.city.isNull);
			return null;
		}
		return true;
	};
	
	var validateAccountNo = function(){
		var accountNo = $("#accountNo").val();
		if(accountNo == ""){
			Helper.message(promptText.accountno.isNull);
			return null;
		}
		if(!Helper.validata.isInteger(accountNo)){
			Helper.message(promptText.accountno.formatError);
			return null;
		}
		return true;
	};
	
	var validateSubbranch = function(){
		var subbranch = $("#subbranch").val();
		if(subbranch == ""){
			Helper.message(promptText.subbranch.isNull);
			return null;
		}
		return true;
	};
	
	$('#submitForm').click(function (){
		if(validateRealName() && validatebank() && validateprovinceId() && validateCity() && validateSubbranch() && validateAccountNo())
		{
			new Helper.RemoteTrans({
				url:Helper.basePath+"/memberCenter/member_operate/setBindAccount.htm",
				params : {realName : $('#realName').val(),accountNo : $('#accountNo').val(),subbranch : $('#subbranch').val(),
					bank : $('#bank').val(),provinceId : $('#provinceId').val(),city : $('#city').val()},
				onSuccess:function(data){
					if(data===true)
					{
						location.href = "/page/memberinfo/bank/sub/bindBank_success.jsp?bankNo="+$('#accountNo').val();
					}else
					{
						return;
					}
				}
			}).send();
		}
	});
});
</script>
</head>

<body>
	<c:import url="/page/common/head.jsp">
		<c:param name="type">wdcp</c:param>
	</c:import>
	<div class="kj_content">
		<div class="tz_title center s_16">绑定提款银行卡</div>
		<div class="bc_area" id="bank_box">
			<div class="ui_form">
				<div class="form_line disabled">
					<label class="attr">真实姓名</label> <span class="cont">${user.realName }</span>
					<input type="hidden" id="realName" name="realName" value="${user.realName }"/>
				</div>
				<div class="form_line disabled">
					<label class="attr">身份证号</label> 
					<span class="cont">
						${fn:substring(memberInfo.cardNumber,0,4)}**********${fn:substring(memberInfo.cardNumber,fn:length(memberInfo.cardNumber)-4,fn:length(memberInfo.cardNumber))}
					</span>
				</div>
				<div class="form_line">
					<label class="attr">银行卡号</label> 
					<input type="text" name="accountNo" id="accountNo" placeholder="您的借记卡号" value="" maxlength="19" onkeyup="value=value.replace(/[^(\d)]/g,'')"> 
				</div>
				<div class="form_line">
					<label class="attr">开户支行</label> 
					<input type="text" name="subbranch" id="subbranch" placeholder="您的开户支行名称" value="" maxlength="30"> 
				</div>
				<div class="form_line disabled select_bank center">
					<label class="attr"> 
						<i class="icon_bank">
							<img id="bankSrc" src="${skin }/images/${bankId }.png" alt="银行">
						</i> 
						<span>${bankName }</span> 
						<input type="hidden" name="bank" id="bank" value="${bankId }"> 
					</label>
				</div>
				<div class="form_line disabled select_area is_click center">
					<label class="attr">
						省份：<select id="provinceId" name="provinceId"></select>
					</label> 
				</div>
				<div class="form_line disabled select_area is_click center">
					<label class="attr">
						城市：<select id="city" name="city"></select>
					</label> 
				</div>
				<div class="btn_line">
					<span class="ui_btn_blue qb_btn btn_block" id="submitForm">确认绑定</span>
				</div>
			</div>
			<div class="ui_tips">
				<h6>温馨提示：</h6>
				<ol>
					<li>1.绑定的银行卡将作为您唯一指定的提款卡号。</li>
					<li>2.如需更改银行卡号请进入个人资料。</li>
					<li>3.请确保您绑定的银行卡信息与实名认证信息相同,否则将无法提款。</li>
				</ol>
			</div>
		</div>
	</div>
</body>
</html>